<template>
  <div class="immediate_pay">
    <van-nav-bar
      title="生活缴费"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <div class="lifepay_sub_title">{{ object.title }}</div>
    <div class="lifepay_devide_info">
      <ul class="immediate_ul">
        <li class="immediate_list">
          <span class="list_left_span">缴费单位</span>
          <span class="list_right_span">{{
            object.companyName ? object.companyName : "未知"
          }}</span>
        </li>
        <li class="immediate_list">
          <span class="list_left_span">缴费户号</span>
          <input
            class="list_right_input"
            type="text"
            placeholder="请输入客户代码"
            v-model="payNum"
          />
        </li>
      </ul>
    </div>
    <div class="devide_div"></div>
    <van-cell title="分组" is-link :value="groupName" @click="show = true" />
    <div class="read_info">
      <van-checkbox v-model="checked" checked-color="#DC4630" icon-size="20px">
        我已阅读并同意<span style="color:#DC4630"
          >《智慧社区自助缴费协议》</span
        >
      </van-checkbox>
    </div>
    <van-button :disabled="disabled" class="pay_btn" @click="immediatePay()"
      >下一步</van-button
    >
    <van-popup
      v-model="show"
      position="bottom"
      round
      :close-on-click-overlay="false"
    >
      <div class="group_panel">
        <div class="panel_title">
          <span>选择分组</span>
          <svg-icon
            @click.native="show = false"
            class="title_close"
            icon-class="绑定房屋-关闭"
          ></svg-icon>
        </div>
        <van-radio-group v-model="radio" class="group_content">
          <van-cell-group>
            <van-cell
              v-for="(item, index) in groupList"
              :key="index"
              :title="item.groupName"
              clickable
              @click="radio = item.groupName"
            >
              <input
                v-model="definedName"
                class="defined_input"
                v-if="item.groupName == '其他'"
                type="text"
                placeholder="自定义分组名称"
              />
              <van-radio
                slot="right-icon"
                :name="item.groupName"
                icon-size="20px"
                checked-color="#DC4630"
              />
            </van-cell>
          </van-cell-group>
          <van-button
            :disabled="groupDisabled"
            class="next_btn"
            @click.stop="selectGroup(radio)"
            >下一步</van-button
          >
        </van-radio-group>
      </div>
    </van-popup>
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
  </div>
</template>

<script>
import smartProperty from "@/controller/smartProperty.js";
import constant from "@/controller/constant.js";
export default {
  name: "newPay",
  data() {
    return {
      payNum: "",
      object: {},
      groupName: "请选择",
      checked: false,
      show: false,
      radio: "",
      definedName: "",
      newGroup: {},
      groupList: [],
      showLoading: false,
      isDefined: false
    };
  },
  computed: {
    disabled() {
      return this.payNum === "" || !this.checked || this.groupName === "请选择";
    },
    groupDisabled() {
      return (
        this.radio == "" || (this.radio == "其他" && this.definedName == "")
      );
    }
  },
  mounted() {
    this.object = this.$route.query;
    this.getGroupPayList();
  },
  methods: {
    getGroupPayList() {
      this.showLoading = true;
      smartProperty
        .community_payment_group_list({})
        .then(res => {
          if (res.code === "0") {
            this.groupList = res.datas;
            this.groupList.push({
              groupName: "其他"
            });
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    },
    createGroup(id,groupName) {
      const data = {
        groupName: groupName,
        houseCode: this.payNum,
        itemId: this.object.id,
        id: id
      };
      smartProperty.community_payment_group_create(data).then(res => {
        if (res.code === "0") {
          // this.$toast("自定义组创建成功");
          this.$router.push({name: 'immediatePay', query: {query:res.datas, id: this.object.id, fromPage: 'newPay'}})
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    immediatePay() {
      if (this.isDefined) {
        this.createGroup('',this.groupName);
      } else {
        this.createGroup(this.newGroup.id, '');
        // this.$router.push({name: 'immediatePay', query: {query:this.newGroup, id: this.object.id, fromPage: 'newPay'}})
      }
    },
    selectGroup(val) {
      if (val === "其他") {
        if (
          this.groupList.findIndex(
            item => item.groupName === this.definedName
          ) > -1
        ) {
          this.$toast("分组名称已经存在，请重新命名！");
          return;
        }
        this.isDefined = true;
        this.groupName = this.definedName;
      } else {
        this.newGroup = this.groupList[this.groupList.findIndex(item => item.groupName === val)]
        this.isDefined = false;
        this.groupName = val;
      }
      this.show = false;
      this.definedName = "";
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/workstation.scss";

.immediate_pay {
  background: #ffffff;
  height: 100%;

  .group_panel {
    padding: 0 0 15px;

    .van-cell--clickable:active {
      background-color: #ffffff;
    }

    .group_content {
      max-height: 300px;
      overflow-y: auto;
      margin-bottom: 50px;
    }

    .defined_input {
      font-size: 12px;
      border: none;
      text-align: right;
      margin-right: 10px;
    }

    .panel_title {
      padding: 15px 15px 10px;
      text-align: center;

      span {
        font-size: 14px;
        color: #333333;
        line-height: 20px;
      }

      .title_close {
        float: right;
        margin-top: 3px;
        margin-right: 3px;
      }
    }
  }

  .read_info {
    .van-checkbox {
      padding: 8.75px 15px;
    }
  }

  .pay_numer_input {
    border-bottom: 1px solid #edeff2;
    padding: 5px 0;
    margin: 0 15px;

    span {
      font-size: 20px;
      color: #999999;
    }

    input {
      font-size: 14px;
      border: none;
      margin-left: 8px;
    }
  }

  .van-cell__value {
    color: #333333;
  }

  .van-cell:not(:last-child)::after {
    right: 0.426667rem;
    border-bottom: 0.02667rem solid #e2e2e2;
  }

  .pay_number_title {
    display: flex;
    flex-wrap: wrap;
    padding: 14px 15px;
    font-size: 16px;
    color: #333333;
  }

  .immediate_ul {
    padding: 0 15px;
  }

  .immediate_list {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    color: #333333;
    padding: 15px 0;
    border-bottom: 1px solid rgb(226, 226, 226);

    .list_left_span {
      width: 100px;
    }

    .list_right_span {
      width: 245px;
      text-align: right;
    }

    .list_right_input {
      width: 230px;
      border: none;
      text-align: right;
    }
  }

  .immediate_list:last-child {
    border-bottom: none;
  }
}
</style>
